<template>
    <div class="login-content">
        <div class="cont">
            <div class="layout">
                <div class="login">
                    <div class="head">
                        哈尔滨市儿童医院预检分控系统
                    </div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" :label-position="'left'"
                             class="form" :show-message="false">
                        <el-form-item label="手机号" prop="phone" class="is-required">
                            <el-input placeholder="请输入手机号" v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password"></el-input>
                        </el-form-item>
                        <!--                        <el-form-item label="验证码" prop="code">-->
                        <!--                            <el-input placeholder="请输入验证码" v-model="ruleForm.code">-->
                        <!--                                <el-button slot="append" class="code-btn" type="text" :disabled="show">-->
                        <!--                                    <span v-show="!show" @click="sendCode">发送验证码</span>-->
                        <!--                                    <span v-show="show">{{time+'s'}}</span>-->
                        <!--                                </el-button>-->
                        <!--                            </el-input>-->
                        <!--                        </el-form-item>-->
                    </el-form>
                    <el-button type="primary" class="submit" @click="submitForm('ruleForm')">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const sha256 = require('js-sha256').sha256
    export default {
        data() {
            // let phoneRule = /^1[34578]\d{9}$/,
            //     validatePhone = (rule, value, callback) => {
            //         if (!value) {
            //             callback(new Error('请填写手机号'))
            //         } else if (!phoneRule.test(value)) {
            //             callback(new Error('手机号格式错误'))
            //         } else {
            //             callback()
            //         }
            //     }
            return {
                ruleForm: {
                    phone: '',
                    password: '',
                    code: ''
                },
                rules: {
                    phone: [
                        {required: true, message: '', trigger: 'blur'}
                        // {validator: validatePhone, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请填写验证码', trigger: 'blur'}
                    ]
                },
                show: false,
                time: 60,
                count: null
            }
        },
        mounted() {
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$message({
                            message: obj[Object.keys(obj)[0]][0].message,
                            type: 'warning'
                        })
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/login/webLoginWithPassword?phone=' + this.ruleForm.phone + '&password=' + sha256(this.ruleForm.password)).then(result => {
                        if (result.success) {
                            // this.$store.commit('SET_USER', {name: ''})
                            this.$nextTick(() => {
                                this.$router.push('/monitor/realTimeMonitoring')
                            })
                        }
                        // this.$router.push('/monitor/health-data')
                    })
                })
            },
            sendCode() {
                this.$refs.ruleForm.validateField('phone', (msg) => {
                    if (msg) {
                        this.$message({
                            message: '请输入手机号',
                            type: 'warning'
                        })
                    } else {
                        this.$http.post('/login/smsCode?phone=' + this.ruleForm.phone).then(result => {
                            if (result.success) {
                                if (result.data) {
                                    alert(result.data)
                                }
                                this.show = true
                                this.countDown()
                            }
                        })
                    }
                })
            },
            countDown() {
                let _this = this
                this.count = setInterval(() => {
                    _this.time--
                    if (_this.time < 1) {
                        clearInterval(_this.count)
                        _this.time = 60
                        _this.show = false
                    }
                }, 1000)
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .login-content {
        height: 100%;
        width: 100%;
        min-width: 1200px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #2D7EF1;

        .cont {
            width: 100%;
            height: 100%;
            min-height: 640px;
            background: url("../../static/images/login-bg.jpg") center no-repeat;
            background-size: cover;

            .layout {
                width: 1300px;
                height: 100%;
                margin: 0 auto;
                text-align: right;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }

        /deep/ .login {
            width: 400px;
            height: 340px;
            background-color: #fff;
            border-radius: 5px;
            display: inline-block;
            text-align: left;

            .head {
                height: 40px;
                line-height: 40px;
                padding: 0 15px;
                /*border-bottom: 1px solid #e8e8e8;*/
                font-size: 18px;
                text-align: center;
                margin-top: 20px;
                color: #3CA5FC;
                font-weight: bolder;
            }

            .el-form {
                margin: 50px;

                .el-form-item {
                    border-bottom: 1px solid #999;
                    margin-bottom: 20px;
                }
            }

            .el-input {
                input {
                    border: 0 none;
                }
            }

            .el-input-group__append {
                border: 0 none;
                background-color: transparent;
            }

            .code-btn {
                color: #409EFF;

                &.is-disabled {
                    color: #999;
                }
            }

            .submit {
                display: block;
                width: 80%;
                margin: 0 auto;
                margin-top: 40px;
                border-radius: 20px;
            }
        }
    }
</style>
